<template>
	<view style="position: fixed;bottom: 0;left: 0; width: 100vw;" class="flex-center">
		<view style="width: 100vw;height: 4vh;background-color: #dde9fe;position: absolute;bottom: 0px;z-index: 1;"></view>
		<view style="width: 39vw;height: 14vh;position: absolute;bottom: 0px;z-index: 2;" class="external-container"></view>
		<view style="width: 33vw;height: 10vh;position: absolute;bottom: 0px;z-index: 3;" class="inner-container flex-center">
			<view style="justify-content: space-around;width: 60%;" class="flex-center">
				<view @click="OnClickSwitchPage(0)" class="current-selectedPage" :isSelected="pageIndex == 0?'true':'false'">
					首頁
				</view>
				<view @click="OnClickSwitchPage(1)" class="current-selectedPage" :isSelected="pageIndex == 1?'true':'false'">
					功能
				</view>
				<view @click="OnClickSwitchPage(2)" class="current-selectedPage" :isSelected="pageIndex == 2?'true':'false'">
					个人
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bottomNav",
		data() {
			return {
			};
		},
		methods:{
			OnClickSwitchPage(index){
				// console.log(index)
				switch(index){
					case 0:
					uni.reLaunch({
						url:'/pages/index'
					});break;
					case 1:
					uni.reLaunch({
						url:'/pages/action'
					});break;
					case 2:
					uni.reLaunch({
						url:'/pages/personal'
					});break;
				}
			}
		}
	}
</script>

<style>
	.inner-container{
		background-color: red;
		clip-path: polygon(0% 100%,10% 0%,90% 0%,100% 100%);
		background: linear-gradient(to bottom,#b5d7fa,#e0effd);
	}
	.external-container{
		clip-path: polygon(0% 100%,10% 0%,90% 0%,100% 100%);
		/* background: linear-gradient(to bottom,#b5d7fa,#e0effd); */
		background-color: #dde9fe;
	}
	
	.current-selectedPage[isSelected="true"]{
		color: black;
	}
	.current-selectedPage[isSelected="false"]{
		color: #CCC;
	}
</style>
